<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>基于SSM的英语单词背诵系统</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.0/normalize.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lykmapipo/themify-icons@0.1.2/css/themify-icons.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pixeden-stroke-7-icon@1.2.3/pe-icon-7-stroke/dist/pe-icon-7-stroke.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.2.0/css/flag-icon.min.css">
    <link rel="stylesheet" th:href="@{/static/css/cs-skin-elastic.css}">
    <link rel="stylesheet" th:href="@{/static/css/style.css}">

    <link href="https://cdn.jsdelivr.net/npm/chartist@0.11.0/dist/chartist.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/jqvmap@1.5.1/dist/jqvmap.min.css" rel="stylesheet">

    <link href="https://cdn.jsdelivr.net/npm/weathericons@2.1.0/css/weather-icons.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/fullcalendar@3.9.0/dist/fullcalendar.min.css" rel="stylesheet" />

    <style>
        .notice{
            text-indent: 40px;
        }
    </style>
    <style>
        #weatherWidget .currentDesc {
            color: #ffffff!important;
        }
        .traffic-chart {
            min-height: 335px;
        }
        #flotPie1  {
            height: 150px;
        }
        #flotPie1 td {
            padding:3px;
        }
        #flotPie1 table {
            top: 20px!important;
            right: -10px!important;
        }
        .chart-container {
            display: table;
            min-width: 270px ;
            text-align: left;
            padding-top: 10px;
            padding-bottom: 10px;
        }
        #flotLine5  {
            height: 105px;
        }

        #flotBarChart {
            height: 150px;
        }
        #cellPaiChart{
            height: 160px;
        }

    </style>


</head>


<body>

<!-- Left Panel -->
<div th:replace="common/leftbar::leftbar"/>


<!-- Right Panel -->
<div id="right-panel" class="right-panel">
    <!-- Header-->

    <div th:replace="common/header::header"/>
    <!-- /#header -->
    <div class="breadcrumbs">
        <div class="breadcrumbs-inner">
            <div class="row m-0">
                <div class="col-sm-4">
                    <div class="page-header float-left">
                        <div class="page-title">
                            <h1>当前位置</h1>
                        </div>
                    </div>
                </div>
                <div class="col-sm-8">
                    <div class="page-header float-right">
                        <div class="page-title">
                            <ol class="breadcrumb text-right">
                                <li><a href="#">主页</a></li>
                                <li><a href="#">个人中心</a></li>
                                <li class="active">修改信息</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="animated fadeIn">

            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header">个人信息</div>
                        <div class="card-body card-block">
                            <form th:action="@{/userUpdate/}+${loginUser.getUserId()}" method="post">
                                <div class="form-group">
                                    <div class="input-group">
                                        <div class="input-group-addon"><i class="fa fa-user"></i></div>
                                        <input th:value="${loginUser.getUserName()}"  name="userName" placeholder="Username" class="form-control">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="input-group">
                                        <div class="input-group-addon"><i class="fa fa-envelope"></i></div>
                                        <input th:value="${loginUser.getEmail()}" type="email" name="email" placeholder="Email" class="form-control">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="input-group">
                                        <div class="input-group-addon"><i class="fa fa-asterisk"></i></div>
                                        <input   th:value="${loginUser.getPassword()}" id="password" name="password" placeholder="Password" class="form-control">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="numNewWordsMaxDay" class="form-label">每日计划新词数</label>
                                    <div class="input-group">
                                        <div class="input-group-addon"><i class="fa fa-book"></i></div>
                                        <select class="form-control" id="numNewWordsMaxDay" name="numNewWordsMaxDay" placeholder="" required >
                                            <div th:each="number: ${maxNewWordsNumList}" >
                                                <div th:switch="${number==loginUser.getNumNewWordsMaxDay()}">
                                                    <option th:text="${number}" th:value="${number}" th:case="true" selected></option>
                                                    <option th:text="${number}" th:value="${number}" th:case="false"></option>
                                                </div>
                                            </div>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="numWordsMaxReview" class="form-label">每日计划复习数</label>
                                    <div class="input-group">
                                        <div class="input-group-addon"><i class="fa fa-book"></i></div>
                                        <select class="form-control" id="numWordsMaxReview" name="numWordsMaxReview" placeholder="" required >
                                            <div th:each="number: ${maxReviewedWordsNumList}" >
                                                <div th:switch="${number==loginUser.getNumWordsMaxReview()}">
                                                    <option th:text="${number}" th:value="${number}" th:case="true" selected></option>
                                                    <option th:text="${number}" th:value="${number}" th:case="false"></option>
                                                </div>
                                            </div>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <p>当前积分:</p>
                                    <p th:text="${loginUser.getScore()}"> omg</p>
                                </div>

                                <div class="form-actions form-group"><button type="submit" class="btn btn-success btn-sm">修改</button></div>
                            </form>
                        </div>
                    </div>
                </div>


            </div>



        </div><!-- .animated -->
    </div><!-- .content -->
    <!-- /.content -->
    <div class="clearfix"></div>
    <!-- Footer -->
    <div th:replace="common/footer::footer"/>

    <!-- /.site-footer -->
</div>

<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.4/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-match-height@0.7.2/dist/jquery.matchHeight.min.js"></script>
<script th:src="@{/static/js/main.js}"></script>

<script>

</script>
</body>
</html>